<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 带药提醒 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 删选表单 start -->
            <div class="handle-box">
                <!-- 当前老师所有班级 -->
                <el-select v-model="healthVo.health.klassName" placeholder="班级名称" class="handle-select mr10">
                    <el-option v-for="klass in klassList" :label="klass.name" :key="klass.id" :value="klass.id">
                    </el-option>
                </el-select>
                <!-- 用户 -->
                <el-input v-model="healthVo.health.studentName" placeholder="学生名" class="handle-input mr10"></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>
            <!-- 删选表单 end -->

            <!-- 表格数据 start -->
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">

                <el-table-column prop="index" label="序号" width="55" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + (healthVo.pageNum - 1) * 6 + 1 }}</span>
                    </template>

                </el-table-column>

                <el-table-column prop="studentName" label="学生姓名"></el-table-column>
                <el-table-column prop="klassName" label="班级"></el-table-column>
                <el-table-column prop="text" label="带药提醒"></el-table-column>
                <el-table-column prop="date" label="用药日期"></el-table-column>
                <el-table-column prop="parentName" label="发送者"></el-table-column>
                <el-table-column prop="sendTime" label="发送时间"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <!-- <el-tag
                            :type="scope.row.status === 'y' ? 'success' : (scope.row.status === 'n' ? 'danger' : '')">
                            {{  scope.row.status  }}</el-tag> -->
                        <el-tag v-if="scope.row.status === 'y'" type="success">已查看</el-tag>
                        <el-tag v-if="scope.row.status === 'n'" type="danger">未查看</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-lx-attention" @click="handleView(scope.$index, scope.row, 'y')">
                            查看详情 </el-button>
                            <!-- <el-button type="text" icon="el-icon-check" class="green" @click="handleStatus(scope.$index, scope.row, 'y')">阅
                            </el-button> -->
                    </template>
                </el-table-column>

            </el-table>
            <!-- 表格数据 end -->

            <!-- 查看弹出框 -->
            <div style="padding-left:50px">
                <el-drawer title="查看带药详情" :visible.sync="viewVisible" :direction="direction" destroy-on-close>
                    <div class="text-div">
                        <span class="title-text">{{ health.studentName }} / {{ health.klassName }}</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text"></span> <span class="context-text">{{ health.parentName }} / {{
                                health.sendTime
                        }}</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text">用药日期：</span> <span class="context-text">{{ health.date }}</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text">用药说明：</span> <span class="context-text">{{ health.text }}</span>
                    </div>
                    <div class="text-div">
                        <el-image class="health_img" :src="health.img" :preview-src-list="[health.img]"> </el-image>
                    </div>
                </el-drawer>
            </div>
            <!-- 弹出框结束 -->

            <!-- 分页区 start -->

            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="healthVo.pageNum"
                    :page-size="3" layout="prev, pager, next, jumper" :page-count="totalPages">
                </el-pagination>
            </div>
            <!-- 分页区 end -->
        </div>

    </div>
</template>

<script>
export default {
    name: 'basetable',
    data() {
        return {
            healthVo: {
                health: {
                    id: '',
                    parentId: '',
                    text: '',
                    date: '',
                    status: '',
                    sendTime: '',
                    checkTime: '',
                    img: '',
                    klassId: '',
                    studentName: '',
                    klassName: '',
                    parentName: ''
                },
                pageNum: 1
            },
            health: {
                id: '',
                parentId: '',
                text: '',
                date: '',
                status: '',
                sendTime: '',
                checkTime: '',
                img: '',
                klassId: '',
                studentName: [],
                klassName: '',
                parentName: ''
            },
            klassList: [],
            totalPages: 0,
            tableData: [],
            multipleSelection: [],
            delList: [],
            imglist: [],
            dialogTableVisible: false,
            TableVisible: false,
            editVisible: false,
            viewVisible: false,
            dialogVisible: false,
            form: {},
            token: '',
            idx: -1,
            id: -1,
            direction: 'rtl',
            managerId: ''
        };
    },

    created() {
        this.getData();
        // this.getklassList();
        this.getMsg();
        this.token = {
            token: localStorage.getItem('token')
        };

    },

    methods: {
        // 获取当前账号信息tableData
        getMsg() {
            this.$axios.get("/auth/admin/getMe").then((r) => {
                // console.log(r);
                this.id = r.data.data.id;
                console.log(this.id);
                this.$axios.get('/manage/admin/klass/getKlassByManagerId/' + this.id).then((r) => {
                    this.klassList = r.data.data;
                    // console.log(r);
                });

            });
        },
        // 获取学生列表数据
        getData() {
            this.$axios.post('/health/admin/list', this.healthVo).then((r) => {
                this.tableData = r.data.data.data;
                console.log(r)
                this.totalPages = r.data.data.totalPages;
            });
        },
        handleSearch() {
            this.getData();
        },
        // 查看详情
        handleView(index, row,status) {
            this.health = row;
            this.viewVisible = true;
            console.log("状态" + row.status);
            this.id = this.health.id;
            console.log("当前角色id："+ row.id)
            // if (row.status == status) {
            //     if(row.status == 'y'){
            //     this.$message.warning('已阅，请勿重复操作');
            // }
            //     return;
            // }
            // 二次确认修改
            // let confMsg = '确定要设为已阅';
            // this.$confirm
            // // (confMsg + '吗？', '提示', {
            // //     type: 'warning'
            // // })
            //     .then(() => {
            //         this.$axios.post('/health/admin/update/'+row.id).then((r) => {
            //             if (r.data.code == 200) {
            //                 // this.$message.success('设为查看成功');
            //                 row.status = status;
            //             } else {
            //                 this.$message.warning('操作失败，请稍候再试');
            //             }
            //         });
            //     })
            //     .catch(() => { });
            this.$axios.post('/health/admin/update/'+row.id).then((r) => {
                        if (r.data.code == 200) {
                            // this.$message.success('设为查看成功');
                            row.status = status;
                        } else {
                            this.$message.warning('操作失败，请稍候再试');
                        }
                    });
        },
        handleStatus(index, row, status) {
            console.log("状态" + row.status);
            this.id = this.health.id;
            console.log("当前角色id："+ row.id)
            // if (row.status == status) {
            //     if(row.status == 'y'){
            //     this.$message.warning('已阅，请勿重复操作');
            // }
            //     return;
            // }
            // 二次确认修改
            let confMsg = '确定要设为已阅';
            this.$confirm
            // (confMsg + '吗？', '提示', {
            //     type: 'warning'
            // })
                .then(() => {
                    this.$axios.post('/health/admin/update/'+row.id).then((r) => {
                        if (r.data.code == 200) {
                            // this.$message.success('设为查看成功');
                            row.status = status;
                        } else {
                            this.$message.warning('操作失败，请稍候再试');
                        }
                    });
                })
                .catch(() => { });
        },

        // // 多选操作
        // handleSelectionChange(val) {
        //     this.multipleSelection = val;
        // },
        // delAllSelection() {
        //     const length = this.multipleSelection.length;
        //     let str = '';
        //     this.delList = this.delList.concat(this.multipleSelection);
        //     for (let i = 0; i < length; i++) {
        //         str += this.multipleSelection[i].name + ' ';
        //     }
        //     this.$message.error(`删除了${str}`);
        //     this.multipleSelection = [];
        // },
        // // 编辑操作
        // handleEdit(index, row) {
        //     this.idx = index;
        //     this.form = row;
        //     this.editVisible = true;
        // },

        // 分页导航
        handleCurrentChange(pageNum) {
            this.healthVo.pageNum = pageNum;
            this.getData();
            console.log(`当前页: ${pageNum}`);
        }
        // // // 分页导航
        // // handlePageChange(val) {
        // //     this.$set(this.userVo, 'pageIndex', val);
        // //     this.pageNum
        // //     this.getData();
        // // }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.blue {
    color: rgb(247, 115, 1)
}

.health_img {
    display: block;
    border: black 2px;
    margin-right: 20px;
    float: left;
    width: 150px;
    height: 150px;
}

.title-text {
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bolder;
    margin-left: 20px;
    margin-bottom: 20px;
}

.green {
    color: rgb(139, 252, 0)
}

.mr10 {
    margin-right: 10px;
}

.text-div {
    margin: 30px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.subtitle-text {
    font-size: 15px;
    font-weight: bolder;
    font-family: sans-serif;

    margin-left: 20px;

}

/* .goods_img {
    display: block;
    border: black 2px;
    margin-right: 20px;
    float: left;
    width: 150px;
    height: 150px;
} */

.size-icon {
    font-size: 25px;
}
</style>

